import 'babel-polyfill';
import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { Router, browserHistory } from 'react-router';

import configureStore from '../common/store/configureStore';
import getRoutes from '../common/routes';

const initialState = window.__INITIAL_STATE__;
const store = configureStore(initialState);
const rootElement = document.getElementById('app');

// 使用getRoutes()获取路由匹配信息，并将其作为Router组件的子元素渲染出来。
const routes = getRoutes();

// browserHistory也来自React Router，它的功能是监听浏览器地址栏的变化，解析URL并与路由组件进行匹配。
// 如此一来，React Router才可以在不同的URL下渲染出正确匹配的组件。

// browserHistory还提供了一些方法可以让你在代码中进行导航
// 跳转到某组件
// browserHistory.push('/some/path')
// //回退到先前的地址
// browserHistory.goBack()
const history = browserHistory;

render(
  <Provider store={store}>
      {/*使用Router组件代替原来的App组件，并将 browserHistory 作为 history 属性传入Router组件。*/}
    <Router history={history}>
      {routes}
    </Router>
  </Provider>,
  rootElement
);
